<template>
	<view>
		<view class="container">
			<view class="top-box pt30 plr40 pb10">
				<view class="search-box flex-box mb40">
					<image src="/static/icon/h-icon_sou.png" mode="aspectFit"></image>
					<input class="input" value="" placeholder="请输入你要查找的城市" placeholder-class="colc" @confirm="search()" @input="input" />
				</view>
				<view class="flex-box mb40">
					<image class="icon-addr mr10" src="/static/icon/h-icon_map.png" mode="aspectFit"></image>
					<view class="fs34 col10 mr20">{{now_city}}</view>
					<view class="fs24 col89" @tap="getLocationLatLng">重新定位</view>
				</view>

			</view>
			<!--  -->
			<view class="fixed-letter">
				<view v-for="item in city" @click="selectLetter(item.title)" v-if="item.item.length>0">{{ item.title }}
				</view>
			</view>
			<!--  -->
			<scroll-view scroll-y="true" :scroll-into-view="toViewId">
				<template v-for="item in city" v-if="item.item.length>0">
					<view :id="item.title">
						<view class="letter">{{item.title}}</view>
						<view class="plr30">
							<view class="city" v-for="item2 in item.item" @tap="bindtap(item2)">{{item2.name}}</view>
						</view>
					</view>
				</template>

				<!-- <view id="B">
					<view class="letter">B</view>

					<view class="plr30"><view class="city" v-for="item in 10">B 11</view></view>
				</view> -->
				<!-- 	<view id="C">
					<view class="letter">C</view>
					<view class="plr30"><view class="city" v-for="item in 10">C 11</view></view>
				</view>
				<view id="D">
					<view class="letter">D</view>
					<view class="plr30"><view class="city" v-for="item in 10">D 11</view></view>
				</view>
				<view id="E">
					<view class="letter">E</view>
					<view class="plr30"><view class="city" v-for="item in 10">E 11</view></view>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>
<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				toViewId: '',
				letterList: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				now_city: '上海市',
				cityData: [],
				inputsearch: '',
				city: [],
				allcity:[],
				config: {
					horizontal: false,
					// 第一个选项是否横排显示（一般第一个数据选项为 热门城市，常用城市之类 ，开启看需求）
					animation: false,
					// 过渡动画是否开启
					search: false,
					// 是否开启搜索
					searchHeight: 45,
					// 搜索条高度
					suctionTop: true // 是否开启标题吸顶
				},
				scrollTop: 0
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			wx.getSystemInfo({
				success: ret => {
					console.log(ret.windowHeight)
				}
			})
			// wx.showLoading({
			//   title: '加载数据中...',
			// })
			// // 模拟服务器请求异步加载数据
			// setTimeout(()=>{
			// for (let j = 0; j < City.length; j++) {
			// 	City[j].item = [];
			// }
			// this.setData({
			//   city: City
			// })
			//   wx.hideLoading()
			// },2000)

			this.initData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function () {
		// }
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		methods: {
			selectLetter(id) {
				this.toViewId = id;
				console.log(this.toViewId);
			},
			// 定位获取当前城市
			getLocationLatLng: function(cb) {
				var that = this;
				app.globalData.getLocation(function(ret) {
					if (ret) {
						// 根据经纬度获取当前城市
						functions.getAjaxData(
							'/api/xiluhouse/universal/get_city_from_lng_lat', {
								lat: ret.latitude,
								lng: ret.longitude
							},
							function(res) {
								uni.setStorageSync('locate_city', res.data);

								if (res.data != that.now_city) {
									that.now_city = res.data

									uni.setStorageSync('now_lat', ret.latitude);
									uni.setStorageSync('now_lng', ret.longitude);
									uni.setStorageSync('now_city', res.data);
								}
							}
						);
					}
				});
			},

			// 选择城市
			bindtap(e) {
				console.log(e)

				this.now_city = e.name

				var cityData = this.cityData;

				for (let index = 0; index < cityData.length; index++) {
					const element = cityData[index];

					if (element.name == e.name) {
						uni.setStorageSync('now_lat', element.lat);
						uni.setStorageSync('now_lng', element.lng);
					}
				}

				uni.setStorageSync('now_city', e.name);
				uni.navigateBack();
			},

			initData() {
				var that = this;
				var now_city = uni.getStorageSync('now_city');
				this.now_city = now_city ? now_city : '上海市'
				this.citylist()
			},
			citylist(){
				var that=this
				functions.getAjaxData('/api/xiluhouse/universal/city_data', {}, function(res) {
					
					// 处理城市数据
					// var city = City;
					var city=[]
					// console.log(city, "获取城市数据")
					for (let index = 0; index < res.data.length; index++) {
						const element = res.data[index];
						var has=0
						var inde=0
						for (let j = 0; j < city.length; j++) {
							const element2 = city[j];
				
							if (element2.title.toLowerCase() == element.first.toLowerCase()) {
								has=1
								inde=j
								
							}
						}
							
						if(has==1){
							city[inde].item.push({
								name: element.name,
								key: element.first
							});
							
						}else{
							city.push({
								title:element.first,
								item:[{name: element.name,
								key: element.first}
								]
							})
							
						}
					}
				
					that.city = city,
					that.allcity = city,
						that.cityData = res.data
				
				});
			},
			
			search(){
				console.log(this.city)
				 let  city= this.allcity;
				
				let newData = [];
	
				for (let i = 0; i < city.length; i++) {
					let itemArr = [];
	
					for (let j = 0; j < city[i].item.length; j++) {
						console.log(this.inputsearch)
						if (city[i].item[j].name.indexOf(this.inputsearch) > -1) {
							
							let itemJson = {};
	
							for (let k in city[i].item[j]) {
								itemJson[k] = city[i].item[j][k];
							}
	
							itemArr.push(itemJson);
						}
					}
	
					if (itemArr.length === 0) {
						continue;
					}
	
					newData.push({
						title: city[i].title,
						// type: data[i].type ? data[i].type : '',
						item: itemArr
					});
					}
					this.city=newData
			},
			input(e) {
				this.inputsearch = e.detail.value
			}
		}
	};
</script>
<style lang="less" scoped>
	.top-box {
		overflow-y: scroll;
		height: 260rpx;

		.search-box {
			padding: 0 30rpx;
			width: 670rpx;
			height: 70rpx;
			background: #ffffff;
			box-shadow: 0 4rpx 30rpx 0 rgba(184, 189, 202, 0.3);
			border-radius: 37rpx;

			image {
				margin-right: 10rpx;
				display: block;
				width: 32rpx;
				height: 32rpx;
			}

			.input {
				font-size: 24rpx;
				color: #333;
				line-height: 33rpx;
			}
		}

		.icon-addr {
			display: block;
			width: 30rpx;
			height: 40rpx;
			// background: #0091FF;
			// box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		}

		.label-addr {
			margin: 0 20rpx 10rpx 0;
			padding: 0 25rpx;
			height: 50rpx;
			background: #ffffff;
			box-shadow: 0 4rpx 30rpx 0 rgba(184, 189, 202, 0.3);
			border-radius: 5rpx;
		}
	}

	.fixed-letter {
		position: fixed;
		right: 15rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 30rpx;
		font-size: 22rpx;
		color: #101010;
		line-height: 28rpx;
		text-align: center;
		z-index: 50;

		view {
			width: 100%;
		}
	}

	scroll-view {
		height: calc(100vh - 260rpx);

		.letter {
			padding: 0 40rpx;
			height: 50rpx;
			background: #f6f7fa;
			font-size: 26rpx;
			color: #898989;
			line-height: 50rpx;
		}

		.city {
			height: 105rpx;
			font-size: 34rpx;
			color: #101010;
			line-height: 105rpx;
		}

		.city+.city {
			border-top: 1rpx solid #eeeeee;
		}
	}
</style>
